<template>
  <div class="comment-item">
    <div class="comment-header">
      <img :src="comment.avatar" :alt="comment.nickname" class="avatar">
      <div class="comment-info">
        <span class="nickname">{{ comment.nickname }}</span>
        <span class="time">{{ formatTime(comment.createdAt) }}</span>
      </div>
      <button 
        class="like-btn"
        :class="{ liked: comment.isLiked }"
        @click="handleLike"
        :disabled="likeLoading"
      >
        <i class="fas fa-heart"></i>
        <span>{{ comment.likeCount }}</span>
      </button>
    </div>
    
    <div class="comment-content">
      <p>{{ comment.content }}</p>
    </div>
    
    <div class="comment-actions">
      <button @click="handleReply" class="reply-btn">
        <i class="fas fa-reply"></i>
        回复
      </button>
    </div>
    
    <!-- 回复列表 -->
    <div v-if="comment.replies && comment.replies.length > 0" class="replies">
      <CommentItem 
        v-for="reply in comment.replies" 
        :key="reply.id"
        :comment="reply"
        :current-nickname="currentNickname"
        @reply="handleReply"
        @like="handleLike"
      />
    </div>
  </div>
</template>

<script>
import { commentAPI } from '@/api/comment.js'
import { ElMessage } from 'element-plus'

export default {
  name: 'CommentItem',
  props: {
    comment: {
      type: Object,
      required: true
    },
    currentNickname: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      likeLoading: false
    }
  },
  methods: {
    formatTime(timeString) {
      const date = new Date(timeString)
      const now = new Date()
      const diff = now - date
      
      const minutes = Math.floor(diff / 60000)
      const hours = Math.floor(diff / 3600000)
      const days = Math.floor(diff / 86400000)
      
      if (minutes < 1) return '刚刚'
      if (minutes < 60) return `${minutes}分钟前`
      if (hours < 24) return `${hours}小时前`
      if (days < 7) return `${days}天前`
      
      return date.toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit'
      })
    },

    async handleLike() {
      this.likeLoading = true
      try {
        const response = await commentAPI.likeComment(this.comment.id, this.currentNickname)
        if (response.data.success) {
          this.comment.isLiked = true
          this.comment.likeCount++
          ElMessage.success('点赞成功')
        } else {
          ElMessage.warning(response.data.message || '点赞失败')
        }
      } catch (error) {
        console.error('点赞失败:', error)
        ElMessage.error('点赞失败')
      } finally {
        this.likeLoading = false
      }
    },

    handleReply() {
      this.$emit('reply', this.comment)
    }
  }
}
</script>

<style scoped>
.comment-item {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 0.4rem;
  padding: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.3s ease;
}

.comment-item:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
}

.comment-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.4rem;
}

.avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  object-fit: cover;
}

.comment-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.nickname {
  color: #ffffff;
  font-weight: 600;
  font-size: 0.85rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.time {
  color: #d0d0d0;
  font-size: 0.75rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.comment-content {
  margin-bottom: 0.4rem;
}

.comment-content p {
  color: #ffffff;
  line-height: 1.4;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 0.8rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.like-btn {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  padding: 0.25rem 0.4rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 0.6rem;
  color: #d0d0d0;
  font-size: 0.65rem;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.like-btn:hover:not(:disabled) {
  background: rgba(255, 64, 129, 0.2);
  border-color: #ff4081;
  color: #ff4081;
  transform: translateY(-1px);
}

.like-btn.liked {
  background: rgba(255, 64, 129, 0.3);
  border-color: #ff4081;
  color: #ff4081;
}

.like-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.comment-actions {
  display: flex;
  gap: 0.5rem;
}

.reply-btn {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  padding: 0.25rem 0.4rem;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 0.6rem;
  color: #d0d0d0;
  font-size: 0.65rem;
  cursor: pointer;
  transition: all 0.3s ease;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.reply-btn:hover {
  background: rgba(151, 220, 153, 0.2);
  border-color: #97dc99;
  color: #97dc99;
}

.replies {
  margin-top: 0.5rem;
  margin-left: 1.2rem;
  padding-left: 0.6rem;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.replies .comment-item {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.replies .comment-item:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}

/* 移动端适配 */
@media (max-width: 768px) {
  .comment-header {
    flex-wrap: wrap;
  }
  
  .replies {
    margin-left: 1rem;
    padding-left: 0.5rem;
  }
  
  .comment-item {
    padding: 0.75rem;
  }
}
</style>
